<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.axios取消请求</title>
</head>
<body>
<button id="btn">发送请求</button>
<button id="cancel">取消请求</button>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.1/jquery.js"></script>

<script type="text/javascript">
    axios.defaults.baseURL="http://127.0.0.1/axios";
    const {CancelToken} = axios;

    let cancel;
    $("#btn").click(()=>{

       axios({
           url: "/get",
           params: {username: "Alice"},
           method: "GET",
           cancelToken: new CancelToken(
               c=>{
                   /*类似于new Promise中的executor回调函数中回传的reject和resolve函数*/
                   /*函数在局部回传，为了让外部也能被使用到可以在外部定义一个全局变量
                   * 在内部为外部定义的全局变量进行赋值*/
                   cancel=c;
               }
           )
       })

    });

    $("#cancel").click(()=>{
        cancel();
    })



</script>









</body>
</html>